<template>
  <div class="container">
    <div class="data-div">
      <div class="c-box">
        <!-- 基础信息部分 -->
        <div class="upload-title-box">
          <div class="upload-title">资产编码</div>
          <div>
            <span style="color: #4b6eef; cursor: pointer" @click="getHistory">历史</span>
          </div>
        </div>
        <div class="num-title">
          <span><span style="color: red">*</span> <span class="type">资产编码类型</span> &nbsp;</span>
          <el-radio-group v-model="radio" @change="changeRadio">
            <el-radio :label="1">统一编码</el-radio>
            <el-radio :label="2">分类编码</el-radio>
          </el-radio-group>
        </div>
        <hk-form
          ref="hkFormRef1"
          :form-labels="basicList"
          label-position="right"
          label-width="125"
          :rules="formRules"
          :data="formData"
          :dict-list="dictList"
          :btn-hidden="true">
          <template #filter-list>
            <el-table ref="tableBox" :data="formData.list">
              <el-table-column type="index" label="序号" />
              <el-table-column prop="moduleName" label="名称" />
              <el-table-column prop="autoRules" label="编码规则">
                <template slot-scope="scope">
                  <el-form-item :prop="'list.' + scope.$index + '.autoRules'" :rules="formRules.autoRules">
                    <el-select
                      v-model="scope.row.autoRules"
                      :disabled="scope.row.disabled"
                      placeholder="请选择"
                      style="width: 100%"
                      @change="changeRules($event, scope)">
                      <el-option
                        v-for="item in dictList.autoRuleList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="prefix" label="前缀">
                <template slot-scope="scope">
                  <el-form-item
                    v-if="scope.row.autoRules == '2'"
                    :prop="'list.' + scope.$index + '.prefix'"
                    :rules="formRules.prefix">
                    <el-input
                      v-model="scope.row.prefix"
                      :disabled="scope.row.disabled"
                      placeholder="请输入"
                      maxlength="20"
                      @change="changePrefix($event, scope)" />
                  </el-form-item>
                  <el-form-item v-else :prop="'list.' + scope.$index + '.prefix'">
                    <span>—</span>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column prop="infix" label="中缀">
                <template slot-scope="scope">
                  <el-form-item
                    v-if="scope.row.autoRules == '2'"
                    :prop="'list.' + scope.$index + '.infix'"
                    :rules="formRules.infix">
                    <el-select
                      v-model="scope.row.infix"
                      :disabled="scope.row.disabled"
                      placeholder="请选择"
                      style="width: 100%"
                      @change="changeInfix($event, scope)">
                      <el-option
                        v-for="item in dictList.infixList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item v-else :prop="'list.' + scope.$index + '.infix'">
                    <span>—</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="suffix" label="后缀">
                <template slot-scope="scope">
                  <el-form-item
                    v-if="scope.row.autoRules == '2'"
                    :prop="'list.' + scope.$index + '.suffix'"
                    :rules="formRules.suffix">
                    <el-select
                      v-model="scope.row.suffix"
                      :disabled="scope.row.disabled"
                      placeholder="请选择"
                      style="width: 100%"
                      @change="changeSuffix($event, scope)">
                      <el-option
                        v-for="item in dictList.suffixList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>

                  <el-form-item v-else :prop="'list.' + scope.$index + '.suffix'">
                    <span>—</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="digit" label="后缀长度">
                <template slot-scope="scope">
                  <el-form-item
                    v-if="scope.row.autoRules == '2'"
                    :prop="'list.' + scope.$index + '.digit'"
                    :rules="formRules.digit">
                    <el-select
                      v-model="scope.row.digit"
                      :disabled="scope.row.disabled"
                      placeholder="请选择"
                      style="width: 100%"
                      @change="changeLength($event, scope)">
                      <el-option
                        v-for="item in dictList.digitList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item v-else :prop="'list.' + scope.$index + '.digit'">
                    <span>—</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="preview" label="编码预览">
                <template slot-scope="scope">
                  <el-form-item :prop="'list.' + scope.$index + '.preview'">
                    <span>{{ scope.row.preview || '-' }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="effectiveDate" label="生效时间" width="270px">
                <template slot-scope="scope">
                  <el-form-item :prop="'list.' + scope.$index + '.effectiveDate'">
                    <el-date-picker
                      v-model="scope.row.effectiveDate"
                      :disabled="scope.row.disabled"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd" />
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleEdit(scope)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </hk-form>
      </div>
      <div class="c-box">
        <div class="table-box">
          <div class="upload-title-box">
            <div class="upload-title">人员编码</div>
          </div>
          <div class="num-title">
            <span><span style="color: red">*</span><span class="type">人员编码类型</span>&nbsp;</span>
            <el-radio-group>
              <el-radio>统一编码</el-radio>
            </el-radio-group>
          </div>
          <hk-form
            ref="hkFormRef2"
            :form-labels="basicList"
            label-position="right"
            label-width="125"
            :rules="formRules"
            :data="formData"
            :dict-list="dictList"
            :btn-hidden="true">
            <template #filter-people>
              <el-table ref="tableBox" :data="formData.people">
                <el-table-column type="index" label="序号" />
                <el-table-column prop="moduleName" label="名称" />
                <el-table-column prop="autoRules" label="编码规则">
                  <template slot-scope="scope">
                    <el-form-item :prop="'people.' + scope.$index + '.autoRules'" :rules="formRules.autoRules">
                      <el-select
                        v-model="scope.row.autoRules"
                        :disabled="scope.row.disabled"
                        placeholder="请选择"
                        style="width: 100%"
                        @change="changeRule($event, scope)">
                        <el-option
                          v-for="item in dictList.autoRuleList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="prefix" label="前缀">
                  <template slot-scope="scope">
                    <el-form-item :prop="'people.' + scope.$index + '.prefix'" :rules="formRules.prefix">
                      <el-input
                        v-model="scope.row.prefix"
                        :disabled="scope.row.disabled"
                        placeholder="请输入"
                        maxlength="20"
                        @change="changePrefix($event, scope)" />
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column prop="infix" label="中缀">
                  <template slot-scope="scope">
                    <el-form-item :prop="'people.' + scope.$index + '.infix'" :rules="formRules.infix">
                      <el-select
                        v-model="scope.row.infix"
                        :disabled="scope.row.disabled"
                        placeholder="请选择"
                        style="width: 100%"
                        @change="changeInfix($event, scope)">
                        <el-option
                          v-for="item in dictList.infixList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="suffix" label="后缀">
                  <template slot-scope="scope">
                    <el-form-item :prop="'people.' + scope.$index + '.suffix'" :rules="formRules.suffix">
                      <el-select
                        v-model="scope.row.suffix"
                        :disabled="scope.row.disabled"
                        placeholder="请选择"
                        style="width: 100%"
                        @change="changeSuffix($event, scope)">
                        <el-option
                          v-for="item in dictList.suffixList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="digit" label="后缀长度">
                  <template slot-scope="scope">
                    <el-form-item
                      v-if="scope.row.autoRules == '2'"
                      :prop="'people.' + scope.$index + '.digit'"
                      :rules="formRules.digit">
                      <el-select
                        v-model="scope.row.digit"
                        :disabled="scope.row.disabled"
                        placeholder="请选择"
                        style="width: 100%"
                        @change="changeLength($event, scope)">
                        <el-option
                          v-for="item in dictList.digitList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </el-form-item>
                    <el-form-item v-else :prop="'people.' + scope.$index + '.digit'">
                      <span>—</span>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="preview" label="编码预览">
                  <template slot-scope="scope">
                    <el-form-item :prop="'list.' + scope.$index + '.preview'">
                      <span>{{ scope.row.preview || '-' }}</span>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="effectiveDate" label="生效时间" width="270px">
                  <template slot-scope="scope">
                    <el-form-item :prop="'list.' + scope.$index + '.effectiveDate'">
                      <el-date-picker
                        v-model="scope.row.effectiveDate"
                        :disabled="scope.row.disabled"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd" />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope)">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </hk-form>
        </div>
      </div>
    </div>
    <footer>
      <el-button type="primary" @click="submitForm">保 存</el-button>
    </footer>
    <post-drawer ref="post_drawer" />
  </div>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import { getList, update, getDict, getUseCode } from '@/api/specialProject/autoNumber'
import PostDrawer from './postDrawer.vue'

export default {
  components: { HkForm, PostDrawer },

  data() {
    return {
      radio: 1,
      // 表单数据
      formData: {
        list: [],
        people: [],
      },
      formRules: {
        people: [{ required: true, message: '不能为空', trigger: 'blur' }],
        autoRules: [{ required: true, message: '请选择', trigger: 'blur' }],
        infix: [{ required: true, message: '请选择', trigger: 'blur' }],
        suffix: [{ required: true, message: '请选择', trigger: 'blur' }],
        prefix: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      basicList: [
        {
          label: '',
          field: 'list',
          type: 'slot',
          span: 24,
          labelWidth: '0px',
        },
        {
          label: '',
          field: 'people',
          type: 'slot',
          span: 24,
          labelWidth: '0px',
        },
      ],
      dictList: {
        digitList: [
          {
            label: '3位数',
            value: 3,
          },
          {
            label: '4位数',
            value: 4,
          },
        ],
        infixList: [],
        suffixList: [],
        autoRuleList: [],
      },
      loading: false,
      hk1: false,
      hk2: false,
    }
  },

  created() {
    this.getDictDatas()
    getUseCode().then((res) => {
      this.radio = Number(res)
      this.getDataList('assets', this.radio)
    })

    this.getDataList('people', 1)
  },
  methods: {
    // 字典获取
    getDictDatas() {
      // 编码规则
      getDict({ code: 'autoRules' }).then((res) => {
        this.dictList.autoRuleList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      // 中缀
      getDict({ code: 'timeUnit' }).then((res) => {
        this.dictList.infixList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      // 后缀
      getDict({ code: 'suffixType' }).then((res) => {
        this.dictList.suffixList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
    },
    getHistory(e) {
      console.log(e)
      this.$refs.post_drawer.show()
    },
    // 前缀
    changePrefix(e, item) {
      console.log(e, item)
      this.changeRules('2', item)
    },
    // 中缀
    changeInfix(e, item) {
      console.log(e, item)
      this.changeRules('2', item)
    },
    // 后缀
    changeSuffix(e, item) {
      console.log(e, item)
      this.changeRules('2', item)
    },
    // 后缀长度
    changeLength(e, item) {
      console.log(e, item)
      this.changeRules('2', item)
    },
    // 默认 自定义
    changeRules(e, item) {
      console.log(e, item)

      item.row.autoRules = e
      if (e === '1') {
        var tm = this.timeFormatConvert('3')
        item.row.preview = `${tm}0001`
      } else {
        var zz = this.timeFormatConvert(item.row.infix)
        var hz = this.isNum(item.row.suffix, item.row.digit)
        var st = `${item.row.prefix || ''}${zz}${hz}`
        item.row.preview = st
      }
    },
    // 默认 自定义
    changeRule(e, item) {
      console.log(e, item)
      item.autoRules = e
      if (e === '1') {
        var tm = this.timeFormatConvert('3')
        item.row.preview = `${tm}0001`
      } else {
        var zz = this.timeFormatConvert(item.row.infix)
        var hz = this.isNum(item.row.suffix, item.row.digit)
        var st = `${item.prefix || ''}${zz}${hz}`
        item.row.preview = st
      }
    },
    isNum(type, ln) {
      if (type === '1') {
        if (ln === 3) {
          return '123'
        } else {
          return '1234'
        }
      }
      if (type === '2') {
        if (ln === 3) {
          return 'abc'
        } else {
          return 'abcd'
        }
      }
      if (type === '3') {
        if (ln === 3) {
          return '001'
        } else {
          return '0001'
        }
      }
      if (type === null) {
        return ''
      }
    },
    timeFormatConvert(type) {
      var timestamp = Date.now()
      // 将时间戳转换为日期格式
      var date = new Date(timestamp)
      const Y = date.getFullYear() // 年
      const M = this.prefixZero(date.getMonth() + 1) // 月
      const D = this.prefixZero(date.getDate()) // 日
      if (type === '1') {
        return Y
      }
      if (type === '2') {
        return Y + M
      }
      if (type === '3') {
        return Y + M + D
      }
      if (type === null) {
        return ''
      }
    },
    prefixZero(num = 0, n = 2) {
      return (Array(n).join('0') + num).slice(-n)
    },

    // 改变编码类型
    changeRadio(e) {
      console.log(e)
      this.radio = e
      this.getDataList('assets', e)
    },
    // 编辑
    handleEdit(e) {
      e.row.disabled = false
    },
    // 查询
    getDataList(classify, encodingType) {
      getList({ classify: classify, encodingType: encodingType }).then((res) => {
        res.forEach((element) => {
          if (element.autoRules === '1') {
            var tm = this.timeFormatConvert('3')
            element.preview = `${tm}0001`
          } else {
            var zz = this.timeFormatConvert(element.infix)
            var hz = this.isNum(element.suffix, element.digit)
            var st = `${element.prefix}${zz}${hz}`
            element.preview = st
          }
        })
        if (classify === 'assets') {
          this.formData.list = res
        } else {
          this.formData.people = res
        }
      })
    },

    async submitForm() {
      // 资产编码
      const params = await this.$refs.hkFormRef1.handleFormSubmit('formLabels')
      // 人员编码
      const data = await this.$refs.hkFormRef2.handleFormSubmit('formLabels')
      update(data.list).then((res) => {
        update(params.people).then((res) => {
          this.$message.success('保存成功')
          this.getDataList('assets', this.radio)
          this.getDataList('people', 1)
        })
      })
    },
  },
}
</script>

  <style lang="scss" scoped>
.num-title {
  margin-left: 15px;
  margin-top: 20px;
}
#app.dark-theme {
  .container,
  .data-div {
    background: transparent !important;
  }
  footer {
    background: #0a183e !important;
  }
  input:disabled {
    color: #ccc !important;
  }

  .type {
    color: #fff;
  }
  .c-box {
    background: rgba(59, 139, 255, 0.1);
  }
  .sp-flex i {
    color: #4b6eef !important;
  }
}
.up-txt {
  font-size: 12px;
}
.add-row {
  margin-top: 20px;
}
.upload-title-box {
  height: 40px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // border-bottom: 1px solid rgba($color: #000000, $alpha: 8%);

  .upload-title {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
  }
}
.container {
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: #eef0f5;
}
.data-div {
  padding: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 80px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: #eef0f5;
}
.c-box {
  background: #fff;
  border-radius: 4px;
  padding: 20px;

  margin-bottom: 20px;
}
.el-form {
  flex: 1;
  overflow: auto;
}
footer {
  height: 70px;
  background: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  position: fixed;
  bottom: 0;
  right: 20px;
  z-index: 999;
}

.empty-box {
  justify-content: center;
  align-items: center;
  display: flex;
}
.table-box {
}
.sm-input {
  ::v-deep {
    .el-input__inner {
      padding-right: 0 !important;
    }
  }
}
::v-deep {
  .el-button--text {
    padding: 0;
  }

  .el-input-group__append {
    background: transparent;
  }
}
</style>

